<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Register</title>

  <!--用百度的静态资源库的cdn安装bootstrap环境-->
  <!-- Bootstrap 核心 CSS 文件 -->
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <!--font-awesome 核心我CSS 文件-->
  <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 在bootstrap.min.js 之前引入 -->
  <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
  <!-- Bootstrap 核心 JavaScript 文件 -->
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>


  <!--为了保险起见，导入了本地的jquery和fontawesome    -->
  <!--jquery-->
  <script type="text/javascript" src="js/jquery.validate.min.js" ></script>
  <link rel="stylesheet" href="css/Login.css">
  <!--font-awesome    -->
  <link rel="stylesheet" href="font-awesome-4\7\0\css\font-awesome.min.css">

  <style>
    /*设置背景图片*/
    body {
      background: url(../img/network.jpg) no-repeat;
      background-size:cover;
      font-size: 15px;
      background-position:center;
    }
    /*给表单的边框设置大小,颜色和不透明度*/
    .form {
      background: rgba(255,255,255,0.9);
      width:400px;margin:120px auto;
    }
    /*设置字体和大小*/
    label {
      font-family: Arial;font-size: 15px
    }
    /*当输入正确时,给输入框设置浅绿色*/
    input.form-control:valid{
      background-color: mintcream;
    }
    /*当输入正确时,给输入框设置浅红色*/
    input.form-control:invalid{
      background-color: #EBEEFD;
      /*#ffeeed*/
    }
    /*设置图标为行内元素，并设置大小和颜色*/
    .fa{
      display: inline-block;
      top: 27px;
      left: 6px;
      position: relative;
      color: #575757;
    }
    /*为几个输入框设置padding,防止和图标重合*/
    input[type="text"],input[type="password"],input[type="email"]{
      padding-left:26px;
    }
    .form-title{
      padding-top:20px;
    }
    #button{
      padding-bottom: 50px;
    }
    .return_banner{
      margin: 20px 0 0 0;
      width: 100%;
      height: 40px;
    }
    .navi_return{
      font-family: 宋体;
      text-decoration:none;
      font-size: 24px;
      margin: 0 0 0 60px;
    }
    .navi_return:hover{
      text-decoration:none;
    }

  </style>

</head>
<body>
<div class="container">
  <!--注册表单-->
  <div class="form row">
    <form action="register" class="form-horizontal col-sm-offset col-md-offset-3">
      <!--调转到首页html-->
      <div class="return_banner">
        <a href="Home.html" class="navi_return">网站首页</a>
      </div>

      <h3 class="form-title">注册</h3>
      <div class="col-sm-9 col-md-9">
        <div class="form-group">
          <!--        用户名图标和用户名输入框            -->
          <i class="fa fa-user" aria-hidden="true"></i>
          <input class="form-control required" type="text" name="username" id="username" placeholder="请输入用户名" onblur="checkUserName()" required>
          <span id="userNameShow"></span>
        </div>

        <!--        密码图标和密码输入框                -->
        <div class="form-group">
          <i class="fa fa-key" aria-hidden="true"></i>
          <input class="form-control required" type="password" name="password" id="password" placeholder="请输入密码" onblur="checkpwd()" required>
          <span id="pwdShow"></span>
        </div>
        <!--          确认密码              -->
        <div class="form-group">
          <i class="fa fa-check-circle-o" aria-hidden="true"></i>
          <input class="form-control required" type="password" name="resetpw" id="resetpw" placeholder="请确认密码" onblur="checkpassword()" required>
          <span id="tishi"></span>
        </div>
        <!--        邮箱                -->
        <div class="form-group">
          <i class="fa fa-envelope" aria-hidden="true"></i>
          <input class="form-control required" type="email" name="email" id="email" placeholder="请输入邮箱" onblur="checkEmail()" required>
          <span id="emailShow"></span>
        </div>

        <div class="form-group">
        </div>

        <!--注册按钮-->
        <div class="form-group">
          <input type="submit" value="注册" class="btn btn-success pull-right">
          <input type="button" onclick="window.location.href='Login.html'" class="btn btn-info pull-left" id="back_btn" value="返回登录"/>
        </div>


      </div>
    </form>
  </div>
</div>


<script>

  /*验证用户名*/
  function checkUserName() {
    //获取用户名
    var userName = document.getElementById("username").value;
    var userNameShowDom = document.getElementById("userNameShow");

    //用户名必须满足大于等于3小于等于20之间
    if (userName.length >= 3 && userName.length <= 20) {

      //获取第一个数
      //var a = userName.charAt(0);

      //用户名需由由英文字母和数字组成的3-20位字符
      var userReg = /^[a-zA-z0-9]{3,20}$/;
      //判断是否符合正则表达式，是就输出“验证通过!!!”
      if (userReg.test(userName)) {
        userNameShowDom.innerText = "用户名通过!";
        userNameShowDom.style.color = "darkgreen";
        return true;
        //如果正则表达式错误则输出“含有数字和字母以外的非法字符!”这句话
      } else {
        userNameShowDom.innerText = "含有非法字符!";
        userNameShowDom.style.color = "red";
      }
      //判断长度
    } else {
      userNameShowDom.innerText = "用户名长度请在3~20内";
      userNameShowDom.style.color = "red";
    }
  }

  /*密码验证*/
  function checkpwd() {
    //获取密码
    var pwd = document.getElementById("password").value;
    var pwdShowDom = document.getElementById("pwdShow");

    //密码必须满足大于等于6小于等于16之间
    if (pwd.length >= 6 && pwd.length <= 16) {

      //使用正则表达式来完成里面有数字和字符同时的存在
      //\D匹配任意一个非阿拉伯数字字符就是除了0~9的其他字符数字
      //\d匹配任意一个阿拉伯数字（0~9）
      //所以/(\D+\d+)|(\d+\D+)/就代表着里面即拥有数字也拥有字符
      //var pwdReg = /(\D+\d+)|(\d+\D+)/;

      //密码不能含有非法字符(需由英文字母和数字组成的6-16位字符)
      var pwdReg = /^[a-zA-z0-9]{6,16}$/;
      if (pwdReg.test(pwd)) {
        pwdShowDom.innerText = "密码可用!";
        pwdShowDom.style.color = "darkgreen";
        return true;
        //如果正则表达式错误则输出“含有数字和字母以外的非法字符!”这句话
      } else {
        pwdShowDom.innerText = "含有非法字符!";
        pwdShowDom.style.color = "red";
        return false;
      }
      //判断长度
    } else {
      pwdShowDom.innerText = "密码长度请在6~16内";
      pwdShowDom.style.color = "red";
      return false;
    }
  }

  /*检查重复密码*/
  function checkpassword() {
    var password = document.getElementById("password").value;
    var repassword = document.getElementById("resetpw").value;

    if(password == repassword) {
      document.getElementById("tishi").innerHTML="<br><font color='green'>两次密码输入一致</font>";
      document.getElementById("submit").disabled = false;

    }else {
      document.getElementById("tishi").innerHTML="<br><font color='red'>两次输入密码不一致!</font>";
      document.getElementById("submit").disabled = true;
    }
  }

  /*验证邮箱*/
  function checkEmail() {
    //获取邮箱
    var email = document.getElementById("email").value;
    var emailShowDom = document.getElementById("emailShow");

    //Email格式不正确，例11@qq.com

    // if (email.length >= 1 && email.length <= 20) {
    if (email.length >= 1) {

      //邮箱格式不能含有非法字符
      var emailReg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
      if (emailReg.test(email)) {
        emailShowDom.innerText = "邮箱通过!";
        emailShowDom.style.color = "darkgreen";
        return true;
        //如果正则表达式错误则输出“含有数字和数字以外的非法字符!”这句话
      } else {
        emailShowDom.innerText = "邮箱格式错误";
        emailShowDom.style.color = "red";
        return false;
      }
      //判断长度
    } else {
      emailShowDom.innerText = "不可为空";
      emailShowDom.style.color = "red";
      return false;
    }
  }
</script>
</body>
</html>
